<template>
  <view v-if="show">
    <!-- MR120升级提示框 -->
    <Modal
      v-if="from !== 'applianceSet'"
      v-model:visible="isUpgradeMR120"
      :title="$t('TT.OtaUpgrade.Upgrade.Dialog.Title')"
      :cancel-text="$t('TT.OtaUpgrade.Upgrade.Cancel.Button')"
      :ok-text="$t('TT.OtaUpgrade.Upgrade.Ok.Button')"
      catchtouchmove="true"
      @cancel="cancelUpdate"
      @ok="confirmUpdate"
    >
      <view class="line-des" style="text-align: left">{{ $t('TT.OtaUpgrade.Upgrade.Content.Text') }}</view>
    </Modal>
    <!-- MR120升级中弹框 -->
    <Modal
      v-model:visible="isRuningUpdateMR120"
      :title="$t('TT.OtaUpgrade.Upgrading.Dialog.Title')"
      catchtouchmove="true"
    >
      <view class="upgrade-box">
        <image class="upgrade-img" :src="imgUrl + 'img_update.jpg'"></image>
        <view class="content-box">
          <image class="loading-img" src="@/pages/appliance/static/TT/ic_loading.png" />
          <view v-if="mcuStatus === 1 || tempUpgradeStatus">{{
            $t('TT.OtaUpgrade.Upgrading.Dialog.ContentOne.Text')
          }}</view>
          <view v-else>{{ $t('TT.OtaUpgrade.Upgrading.Dialog.ContentTwo.Text') }}</view>
        </view>
      </view>
    </Modal>
    <!-- MR120 升级失败 -->
    <Modal
      v-model:visible="isUpdateFailMR120"
      catchtouchmove="true"
      :title="$t('TT.OtaUpgrade.UpgradeFail.Dialog.Title')"
      :cancel-text="$t('TT.OtaUpgrade.UpgradeFail.Dialog.Cancel.Button')"
      :ok-text="$t('TT.OtaUpgrade.UpgradeFail.Dialog.Ok.Button')"
      @cancel="tryAgain"
      @ok="contactService(from === 'applianceSet' ? 'applianceSet' : '')"
    >
      <view class="line-des">{{ $t('TT.OtaUpgrade.UpgradeFail.Dialog.ContentOne.Text') }}</view>
      <view class="line-des">{{ $t('TT.OtaUpgrade.UpgradeFail.Dialog.ContentTwo.Text') }}</view>
    </Modal>
    <!-- MR120 升级成功 -->
    <Modal
      v-model:visible="isUpdateSucMR120"
      catchtouchmove="true"
      :title="$t('TT.OtaUpgrade.UpgradeSucess.Dialog.Title')"
      :ok-text="$t('TT.OtaUpgrade.UpgradeSucess.Dialog.Ok.Button')"
      @ok="bindSuccessTipClose"
    >
      <view class="line-des">{{ $t('TT.OtaUpgrade.UpgradeSucess.Dialog.Content.Text') }}</view>
    </Modal>
    <!-- 联系客服 -->
    <Modal
      v-model:visible="isShowContactServicePop"
      :title="$t('TT.OtaUpgrade.CallServe.Dialog.Title')"
      description="400 820 6017"
      :cancel-text="$t('TT.OtaUpgrade.CallServe.Dialog.Cancel.Button')"
      :ok-text="$t('TT.OtaUpgrade.CallServe.Dialog.Ok.Button')"
      catchtouchmove="true"
      @cancel="cancelCall"
      @ok="confirmCall"
    ></Modal>
  </view>
</template>

<script setup lang="ts">
import Modal from '@/common/modal.vue'
import netconfig from '@/config/netconfig'

import { useOtaUpgrade } from './otaUpgradeHelper'

const props = defineProps<{
  show: boolean
  mcuStatus: number
  haId: string
  from?: string
}>()

const emit = defineEmits<{
  (e: 'update', isUpgrade: boolean): void
  (e: 'change-run', isRun: boolean): void
  (e: 'change-fail', isFail: boolean): void
  (e: 'change-sucess', isSucess: boolean): void
}>()

let otemsTime = 0

const imgUrl = netconfig.ASSETSPRE_ICONS

const haId = computed(() => props.haId)

const {
  mcuStatusChange,
  judgeAllOtaVersion,
  confirmUpdate,
  tryAgain,
  cancelUpdate,
  contactService,
  cancelCall,
  confirmCall,
  bindSuccessTipClose,
  isUpgradeMR120,
  isRuningUpdateMR120,
  isUpdateSucMR120,
  isUpdateFailMR120,
  isShowContactServicePop,
  tempUpgradeStatus,
} = useOtaUpgrade(haId)

defineExpose({
  confirmUpdate,
})

watch(
  () => props.show,
  (show) => {
    if (!show) {
      clearInterval(otemsTime)
      return
    }
    if (props.from === 'applianceSet') return
    nextTick(() => {
      if (Number(props.mcuStatus) === 0) {
        judgeAllOtaVersion(0)
      } else {
        judgeAllOtaVersion(2)
      }
    })
  }
)

watch(
  () => props.mcuStatus,
  (value) => {
    mcuStatusChange(Number(value))
  }
)

watch(
  () => isUpgradeMR120.value,
  (value) => {
    emit('update', value)
  }
)
watch(
  () => isRuningUpdateMR120.value,
  (value) => {
    emit('change-run', value)
  }
)
watch(
  () => isUpdateFailMR120.value,
  (value) => {
    emit('change-fail', value)
  }
)
watch(
  () => isUpdateSucMR120.value,
  (value) => {
    emit('change-sucess', value)
  }
)
</script>

<style scoped lang="less">
.upgrade-box {
  padding-bottom: 50rpx;
  width: 100%;
}

.content-box {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #131d3e;
  text-align: center;
  line-height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
}

.upgrade-img {
  width: 256rpx;
  height: 256rpx;
  margin-top: 30rpx;
}

.line-des {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 48rpx;
  color: var(--dack-color);
  opacity: 0.8;
  text-align: center;
}

.loading-img {
  width: 36rpx;
  height: 36rpx;
  animation: zhuanquan 3s linear 0.1s infinite;
  margin-right: 8rpx;
}

@keyframes zhuanquan {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-720deg);
  }
}
</style>
